<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Test project Build_in</title>
    <link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
    <!--界面布局-->
    <div id="unity-container" class="unity-desktop">
        <canvas id="unity-canvas" width=1920 height=1080></canvas>

        <div id="unity-loading-bar">
            <div id="unity-webgl-background">
                <div id="text"> </div>
                <div id="unity-progress-bar-empty">
                    <div id="unity-progress-bar-full"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="Build/webTest.loader.js"></script>
    <script>
          //用于下载构建加载程序的 JavaScript 代码
        var buildUrl = "Build";
        var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
			var config = {
			  dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
			  frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
			  codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
			  streamingAssetsUrl: "StreamingAssets",
			  companyName: "{{{ COMPANY_NAME }}}",
			  productName: "{{{ PRODUCT_NAME }}}",
			  productVersion: "{{{ PRODUCT_VERSION }}}",
			};

        var container = document.querySelector("#unity-container");
        var loadingBar = document.querySelector("#unity-loading-bar");
        var canvas = document.querySelector("#unity-canvas");
        var progressText = document.querySelector("#text");
        var progressBarFull = document.querySelector("#unity-progress-bar-full");

   //  创建新实例
       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        }
        document.body.style.textAlign = "left";

        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
        canvas.style.position = "fixed";
        loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      var myGameInstance = null;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
        	progressText.innerHTML=progress*100+"%";//进度条
           progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
        	myGameInstance=unityInstance;

        }).catch((message) => {
          alert(message);
        });
      };
        document.body.appendChild(script);

        function message(methodName, value) {
            myGameInstance.SendMessage('Connect', methodName, value);
        }
        function Start() {
            let data = {
                "ScenesName": "zm.ab",
                "ScenesPath": "http://192.168.2.8/AB/",
                "ScenesVersion": 0.7,
                "PrefabName": "prefab.ab",
                "PrefabPath": "http://192.168.2.8/AB/",
                "PrefabVersion": 0.4
            };
            message('LoadInfo', JSON.stringify(data));
            let Resolution = {
                "wide": window.innerWidth,
                "high": window.innerHeight
            };
            message('ResolutionSet', JSON.stringify(Resolution))//将屏幕分辨率返回给三维，用于三维坐标转换屏幕坐标
            message('InitialSet','{"CamMoveSpeed":1,"CamRotSpeed":90,"CamZoomSpeed":2}');//调整鼠标控制速度
        }
        //模型加载完调用
        function LoadFinishRun() {
             loadingBar.style.display = "none";//模型加载完成后关闭加载界面
        }
        //全屏
        function Fullscreen() {

            myGameInstance.SetFullscreen(1);
        }
        //退出全屏
        function FullscreenQuit() {
            myGameInstance.SetFullscreen(0);

        }
        //得到相机的位置
        function GetCamerPos(data) {
            alert(data);
        }
        //得到右键点坐标
        function GetClickPos(data) {
            //alert(data);
        }
        //得到屏幕坐标
         function GetScreenPoint(data)
    	{
    		var jsonObj = JSON.parse(data);
    	   	var jsonObj1 = jsonObj[0];
    	   	var jsonObj2 = jsonObj[1];
    	   	var jsonObj3 = jsonObj[2];
    	  // alert(data);
					var element = document.getElementById('myElement');
					element.style.position = 'absolute';
					element.style.left = jsonObj1.X+'px';
					element.style.top  =  jsonObj1.Y+'px';


					var element1 = document.getElementById('myElement1');
					element1.style.position = 'absolute';
					element1.style.left = jsonObj2.X+'px';
					element1.style.top  =  jsonObj2.Y+'px';


					var element2 = document.getElementById('myElement2');
					element2.style.position = 'absolute';
					element2.style.left = jsonObj3.X+'px';
					element2.style.top  =  jsonObj3.Y+'px';
     	}
        //得到罗盘角度
        function GetCompassAngles(data) {
            //	alert(data);
        }
        //鼠标单击触发
        function MouseClick(data) {

        }
        //鼠标双击触发
        function ModelDoubleClick(data) {

            //message('OpenWareHouse',parseInt(data))
        }
        //相机路径移动完成
        function CameraMoveFinish(data) {
           // alert("完成");
        }
        //鼠标进入触发
        function MouseOver(data) {

            // message('HighlightPipeOpen',data);//高亮模型
        }
        //鼠标离开触发
        function MouseOut(data) {
            //  message('HighlightPipeClose',data);//取消高亮
        }

        function ShowAll() {

        }
        //点击机器
        function MachineClick(data)
        {}
        //鼠标进入机器
        function MachineEnter(data)
    	{
         message('MachineChoiseOn',data)
    	}
        //鼠标退出机器
    	function MachineEixt(data)
    	{
        message('MachineChoiseOff',data)
    	}
    	function WorldPoint()
    	{
    	message('SetWorldPoint','[{"ID":"Point_1","Pos":[0.08,0.62,0.06]},{"ID":"Point_2","Pos":[0.5,0.9,-0.39]},{"ID":"Point_3","Pos":[-0.43,0.79,-0.28]}]');
    	}
    	function ShowMachine1()
    	{
    		message('DisplayMachine',1)

    		message('SetCamerPos','{"Loca":[["0.9715139","1.499039","-2.394364","32","3.548645"]],"Time":1,"Loop":"false"}')
    	}
    	  	function ShowMachine2()
    	{
    		message('DisplayMachine',2)
    		message('SetCamerPos','{"Loca":[["-0.3477948","1.226085","-2.061158","34.14384","342.948"]],"Time":1,"Loop":"false"}')
    	}
    		function ShowMachineAll()
    	{
    		message('DisplayMachine',0)

    		message('SetCamerPos','{"Loca":[["-0.2977091","1.551806","-2.465499","32","6.885133"]],"Time":1,"Loop":"false"}')
    	}

    </script>
    <style type="text/css">
        body {
            overflow: scroll;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        //滚动条隐藏
    </style>
    <div style="position:absolute;z-index:1">

        <button type="button" onclick=ShowMachineAll()>显示全部机器</button>
        <button type="button" onclick=ShowMachine2()>显示油缸</button>
        <button type="button" onclick=ShowMachine1()>显示闸门</button>
        <button type="button" onclick=message('SetFlyMode')>自由漫游</button>
        <!--闸门旋转范围0-50度-->
        <button type="button" onclick=message('TargetRotate',25)>旋转闸门</button>
        <button type="button" onclick=message('TargetRotateLerp','{"Angle":50,"Time":3}')>旋转闸门动画</button>
        <button type="button" onclick=WorldPoint()>设置转换点</button>
        <img src="TemplateData/fullscreen-button.png" id=myElement></img>
        <img src="TemplateData/fullscreen-button.png" id=myElement1></img>
        <img src="TemplateData/fullscreen-button.png" id=myElement2></img>
        <button type="button" id="myElement2" onclick=message('ReadCamerPos')>读取相机位置</button>
        <button type="button" onclick=message('SetCamerPos','{"Loca":[["0.6826081","1.717733","-2.146602","33.40539","350.127"]],"Time":0,"Loop":"false"}')>定位</button>
        <button type="button" onclick=message('SetCamerPos','{"Loca":[["-1.397154","1.781787","1.433179","41.67617","135.7292"],["1.628622","1.868993","1.017478","44.2238","238.005"]],"Time":0.5,"Loop":"false"}')>定位轨迹</button>
        <button type="button" onclick=message('MachineWarn','{"Count":2006,"Color":"#FFFF00"}')>报警1</button>
        <button type="button" onclick=message('MachineWarn','{"Count":2004,"Color":"#FF0000"}')>报警2</button>
        <button type="button" onclick=message('MachineWarnEnd',2004)>解除报警1</button>
        <button type="button" onclick=message('MachineWarnEndAll')>解除报警</button>
        <button type="button" onclick=message('MachineChoiseOffAll')>关闭所以选择</button>
</body>
</html>

